<template>
  <el-container>
    <el-header>
      <router-link :to="{ name: 'Home' }" class="gotohome"
        ><h1>前端题库网</h1></router-link
      >
      <router-link :to="{ name: 'Home' }" class="gotohome"
        >回到首页</router-link
      >
    </el-header>
    <el-main>
      <div
        class="startmainbox mainbox"
        v-if="start"
        v-loading="loading"
        element-loading-text="题目加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="startbox titlebox">
          <h3>题目：{{ item.titleDes }}</h3>
        </div>
        <div class="startbox ckeckbox">
          选择：
          <el-radio-group v-model="checkAnswer" :disabled="sureAnswer">
            <el-radio-button label="A">A. {{ item.answerA }}</el-radio-button>
            <el-radio-button label="B">B. {{ item.answerB }}</el-radio-button>
            <el-radio-button label="C">C. {{ item.answerC }}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="startbox sureBtn">
          <span v-show="sureAnswer === true"
            >正确答案：{{ item.answerRight }} 你的答案：{{ checkAnswer }}
            <el-tag :type="isRight ? 'success' : 'danger'">{{
              isRight ? "正确" : "错误"
            }}</el-tag>
          </span>
          <span v-show="sureAnswer === false">
            <el-button type="info" @click="tochange">确定</el-button>
          </span>
        </div>
        <div class="startbox desbox">
          <span v-show="sureAnswer">参考答案：{{ item.answerDes }}</span>
        </div>
        <div class="startbox actionbox">
          <span 
            ><el-button type="info" @click="getitem"
              >下一题</el-button
            > </span
          ><br />
          <span class="actionspan">
            <el-tooltip
              class="item"
              effect="dark"
              content="收藏"
              placement="top-start"
            >
              <el-button
                @click="collect"
                size="mini"
                type="warning"
                icon="el-icon-star-off"
                circle
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="填写错题原因或建议"
              placement="top-start"
            >
              <el-popover placement="top" width="160" v-model="visible">
                <p>题目错误或建议的内容</p>
                <el-input v-model="toComplaintText"></el-input>
                <div style="text-align: right; margin: 10px">
                  <el-button
                    size="mini"
                    style="color: black"
                    type="text"
                    @click="visible = false"
                    >取消</el-button
                  >
                  <el-button type="info" size="mini" @click="toComplaint"
                    >确定</el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  type="info"
                  icon="el-icon-message"
                  circle
                ></el-button>
              </el-popover>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="退出"
              placement="top-start"
            >
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-right"
                circle
                @click="goback"
              ></el-button> </el-tooltip
          ></span>
        </div>
      </div>
      <div class="mainbox" v-else>
        <div class="typebox">
          选择考点：
          <el-radio-group v-model="type">
            <el-radio-button label="vue"></el-radio-button>
            <el-radio-button label="react"></el-radio-button>
            <el-radio-button label="js"></el-radio-button>
            <el-radio-button label="css"></el-radio-button>
            <el-radio-button label="html"></el-radio-button>
          </el-radio-group>
        </div>

        <div class="btnbox">
          <el-button type="info" @click="getitem">开始答题</el-button>
        </div>
      </div>
    </el-main>
    <el-footer> xxx科技©2021 All rights reserved admin@xxxxxxxx.com </el-footer>
  </el-container>
</template>

<script>
import { apiGetItemList, apiToComplaint, apiToCollect } from "../api/answer";
export default {
  data() {
    return {
      type: "vue",
      start: false,
      loading: false,
      item: {},
      checkAnswer: "",
      sureAnswer: false,
      toComplaintText: "",
      visible: false,
    };
  },
  computed: {
    isRight: function () {
      return this.checkAnswer === this.item.answerRight;
    },

    userinfo() {
      return this.$store.state.user.username;
    },
  },
  methods: {
    async getitem() {
      this.sureAnswer = false;
      this.start = true;
      this.loading = true;
      const res = await apiGetItemList({
        type: this.type,
      });
      console.log(res);
      this.item = res.data.data;
      this.loading = false;
    },
    tochange() {
      this.sureAnswer = true;
    },
    goback() {
      this.start = false;
    },
    async toComplaint() {
      if (this.toComplaintText.trim() === "")
        return this.$message.info("提交内容不得为空");
      this.visible = false;

      const res = await apiToComplaint({
        itemId: this.item.id,
        text: this.toComplaintText,
        userinfo: this.userinfo,
      });
      console.log(res);
      this.toComplaintText = "";
      if (res.data.state !== 200) {
        return this.$message.error("提交失败");
      }
      this.$message.success("提交成功");
    },
    async collect() {
      const res = await apiToCollect({
        id: this.item.id,
        userinfo: this.userinfo,
      });

      if (res.data.state !== 200) {
        if (res.data.state === 304) {
          return this.$message.info("已经收藏过了");
        }
        this.$message.error("收藏失败");
      }
      this.$message.success("收藏成功");
    },
  },
};
</script>

<style lang="less" scoped>

.el-container {
  width: 100vw;
  height: 100vh;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header h1 {
  margin-left: 20%;
  float: left;
  line-height: 50%;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  display: flex;
  align-items: center;
}

.mainbox {
  background-color: snow;
  border: 1px solid #b3c0d1;
  margin: 0 auto;
  width: 50%;
  height: 60%;
  border-radius: 10%;
  text-align: center;
}
.typebox {
  display: flex;
  height: 50%;
  align-items: center;
  justify-content: center;
}
.btnbox {
  display: flex;
  height: 10%;
  align-items: center;
  justify-content: center;
}
.startmainbox {
  display: flex;
  flex-wrap: wrap;
}
.startbox {
  width: 100%;
}

.titlebox {
  height: 20%;
  /* background-color: steelblue; */
}
.ckeckbox,
.sureBtn {
  height: 20%;
}
.desbox {
  height: 20%;
}
.actionbox {
  height: 20%;

}

.gotohome {
  color: black;
}

a {
  text-decoration: none;
}
.actionspan {
  margin-right: 5%;
  float: right;
}
.actionspan .el-button {
  margin: 0 5px;
}
</style>